<template>
<div class>
  <head :title="title" :autoback="false" @backClick="backClick"></head>
  <scroller class="wrapper" v-if="!showDetail">
    <div class="content">
      <div class="row">
        <text class="nominal">First name</text>
        <div class="inputbox">
          <input autofocus class="input" type="text" v-model="first_name" />
        </div>
      </div>
      <div class="row">
        <text class="nominal">Last name</text>
        <div class="inputbox">
          <input class="input" type="text" v-model="last_name" />
        </div>
      </div>
      <div class="row">
        <text class="nominal">Phone number</text>
        <div class="inputbox">
          <text class="countNum">+61</text>
          <input class="input" maxlength="10" type="tel" v-model="phone" />
        </div>
      </div>

      <div class="row">
        <text class="nominal">Location</text>
        <div class="inputbox" @click="chooseCity">
          <text class="input padding30"  >{{province+" "+city+" "+county}}</text>
        </div>
        <text class="iconfont cell-arrow-icon">&#xe6a1;</text>
      </div>
      <div class="row">
        <text class="nominal">UNIT number</text>
        <div class="inputbox">
          <input class="input" type="number" maxlength="4" v-model="unit_number" />
        </div>
      </div>

      <div class="row">
        <text class="nominal">Address</text>
        <div class="inputbox">
          <text class="input padding30" @click="showDetail=true">{{address}}</text>
        </div>
      </div>

      <div class="row">
        <text class="nominal">Postal Code</text>
        <div class="inputbox">
          <input class="input" type="number" maxlength="4" v-model="postal_code" />
        </div>
      </div>
      <div class="row noBb">
        <text class="nominal">Location type</text>
        <div class="selectBox">
          <div class="radioBox" @click="type='House'">
            <text class="iconfont radio" v-if="type=='House'">&#xe602;</text>
            <text class="iconfont radio" v-if="type!=='House'">&#xe67f;</text>
            <text>House</text>
          </div>
          <div class="radioBox" @click="type='Office'">
            <text class="iconfont radio" v-if="type=='Office'">&#xe602;</text>
            <text class="iconfont radio" v-if="type!=='Office'">&#xe67f;</text>
            <text>Office</text>
          </div>
          <div class="radioBox" @click="type='Apartment'">
            <text class="iconfont radio" v-if="type=='Apartment'">&#xe602;</text>
            <text class="iconfont radio" v-if="type!=='Apartment'">&#xe67f;</text>
            <text>Apartment</text>
          </div>
        </div>
      </div>

      <!-- <div class="row" v-if="editType=='edit'" @tap="del">
				<text class="delloca"> 	删除收货地址 </text>
      </div>-->
    </div>
    <div class="content mt20">
      <div class="row noBb">
        <text class="longtitle">Set as default address</text>
        <div class=" switch" @click="isDefault=!isDefault">
          <!-- <switch color="#f06c7a" :checked="isDefault" @change="isDefaultChange" /> -->
          <image class="switchImg" :src="`root:img/s${isDefault?'open':'close'}.png`" />
        </div>
      </div>
    </div>
    <div class="content mt20 tap" v-if="id" @click="delAddress">
      <div class="row noBb">
        <text class="deletetitle">Delete address</text>
      </div>
    </div>
    <div class="save">
      <text class="btn" @click="saveData">Confirm</text>
    </div>
    <wxc-popup
      height="600"
      pos="bottom"
      ref="showAddress"
      :show="showAddress"
      @wxcPopupOverlayClicked="showAddress=false"
    >
      <CityPicker ref="cityPick" @confirm="confirm" :cityData="cityData"></CityPicker>
    </wxc-popup>
  </scroller>
  <div v-if="showDetail" class="detailWrapper">
    <input class="detailInput" v-model="addressDe" @input="seachNaer" />
    <scroller style="flex:1">
      <div
        class="addresDemo"
        @click="selectAddress(item)"
        v-for="(item,index) in predictions"
        :key="index"
      >
        <text class="addresItem">{{item.description}}</text>
      </div>
      <div class="cloboc">
        <!-- <image @click="predictions=[]" class="closeImg" src="root:img/delete.png" /> -->
      </div>
    </scroller>
  </div>
  <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
    <floading class="indicator" color="#303030"></floading>
  </div>
</div>
</template>

<script>
import CityPicker from "../../../component/citypicker/cityPicker.vue";
const updateAddress = new BroadcastChannel("updateAddress");
import {
  get_address_info,
  add_address_info,
  edit_address_info,
  del_address_info,
  get_region_List_all,
  getGPSPlace,
  get_address_infos
} from "../../../mixin/ajax";
import { WxcPopup } from "weex-ui";

import asCore from "../../../mixin/core";
export default {
  components: {
    CityPicker,
    WxcPopup
  },
  data() {
    return {
      cityData: [],
      predictions: [],
      showDetail: false,
      showAddress: false,
      addressDe: "",
      title: "Receiving address",
      editType: "add",
      id: "",
      name: "",
      first_name: "",
      last_name: "",
      phone: "",
      detailed: "",
      type: "House",
      unit_number: "",
      isDefault: false,
      county: "",
      province: "",
      city: "",
      postal_code: "",
      address: "",
      latitude: "",
      longitude: ""
    };
  },
  created() {
    get_region_List_all({}, (res, flag) => {
      if (flag && res.code == 200) {
        this.cityData = res.data;
      }
    });
  },
  methods: {
    onLoad(parmar) {
      //获取传递过来的参数
      if (parmar && parmar.param) {
        return false;
      }

      asCore.getBsessionid(userId => {
        this.users_id = userId;
      });
      if (parmar && parmar.id) {
        this.id = parmar.id;
        this.editType = "edit";
        this.getAddress(parmar.id);
      }
      if (parmar && parmar.type) {
        this.editType = parmar.type;
      }
      if (this.editType == "add") {
        this.getEditData();
      }
      var page = weex.requireModule("page");
      page.enableBackKey(false);
      page.setBackKeyCallback(() => {
        this.backClick();
      });
    },
    backClick() {
      let that = this;
      if (!this.first_name && !this.last_name && !this.phone && !this.address) {
        that.back();
        return false;
      }
      var modal = weex.requireModule("modal");
      modal.confirm(
        {
          message: "Do you want to save a draft?",
          okTitle: "Save",
          cancelTitle: "Delete",
          duration: 0.3
        },
        function(value) {
          if (value == "Save") {
            that.saveEditData();
          } else {
            var pref = weex.requireModule("storage");
            pref.removeItem("editAddress");
          }
          that.back();
        }
      );
    },
    saveEditData() {
      let data = {
        users_id: this.users_id,
        first_name: this.first_name,
        last_name: this.last_name,
        phone: this.phone,
        province: this.province,
        type: this.type,
        city: this.city,
        latitude: this.latitude,
        longitude: this.longitude,
        postal_code: this.postal_code,
        area: this.county,
        unit_number: this.unit_number,
        address: this.address,
        is_default: this.isDefault
      };
      var pref = weex.requireModule("storage");
      pref.setItem("editAddress", JSON.stringify(data));
    },
    getEditData() {
      var pref = weex.requireModule("storage");
      pref.getItem("editAddress", event => {
        if (event.result == "success") {
          var value = JSON.parse(event.data);
          this.users_id = value.users_id;
          this.first_name = value.first_name;
          this.last_name = value.last_name;
          this.phone = value.phone - 0;
          this.province = value.province;
          this.type = value.type;
          this.city = value.city;
          this.latitude = value.latitude;
          this.longitude = value.longitude;
          this.postal_code = value.postal_code;
          this.area = value.county;
          this.unit_number = value.unit_number;
          this.address = value.address;
          this.is_default = value.isDefault;
        }
      });
    },
    seachNaer(val) {
      get_address_infos(
        { input: val.value.replace(/\s*/g, "") },
        (res, flag) => {
          if (flag && res.code == 200) {
            if (res.data && res.data.predictions) {
              this.predictions = res.data.predictions;
            }
          } else {
            this.predictions = [];
          }
        }
      );
    },
    selectAddress(item) {
      this.address = item.description;
      getGPSPlace({ place_id: item.place_id }, (res, flag) => {
        if (res.code == 200) {
          this.latitude = res.data.result.geometry.location.lat;
          this.longitude = res.data.result.geometry.location.lng;
          this.showDetail = false;
        }
      });
    },
    saveData() {
      let that = this;
      let data = {
        users_id: this.users_id,
        first_name: this.first_name,
        last_name: this.last_name,
        phone: this.phone - 0,
        province: this.province,
        type: this.type,
        city: this.city,
        latitude: this.latitude,
        longitude: this.longitude,
        postal_code: this.postal_code,
        area: this.county,
        unit_number: this.unit_number,
        address: this.address,
        is_default: this.isDefault ? "2" : "1"
      };
      let refs = /^(\+?61|04|4)\d{8}$/;
      if (this.editType == "edit") {
        data.id = this.id;
      }
      if (!data.first_name) {
        this.toast("Enter First name");
        return;
      }
      if (!data.last_name) {
        this.toast("Enter  Last name");
        return;
      }
      if (!data.phone) {
        this.toast("Enter receive phone");
        return;
      }

      if (!refs.test(data.phone)) {
        this.toast("Mobile phone number is not standard");
        return false;
      }
      if (!data.unit_number) {
        this.toast("Enter unit number");
        return;
      }

      if (!data.address) {
        this.toast("Enter receive address");
        return;
      }
      if (!data.city) {
        this.toast("Picker receive location");
        return;
      }

      if (this.editType == "edit") {
        this.editAddress(data);
      } else {
        this.addAddress(data);
      }
    },
    getAddress(id) {
      this.isLoading = true;
      get_address_info({ id: id }, (res, flag) => {
        this.isLoading = false;
        if (flag) {
          if (res.code == 200) {
            this.first_name = res.data.first_name;
            this.last_name = res.data.last_name;
            this.phone = res.data.phone;
            this.province = res.data.province;
            this.type = res.data.type;
            this.latitude = res.data.latitude;
            this.longitude = res.data.longitude;
            this.city = res.data.city;
            this.county = res.data.area;
            this.address = res.data.address;
            this.unit_number = res.data.unit_number;
            this.postal_code = res.data.postal_code;

            this.isDefault = res.data.is_default == "2" ? true : false;
          }
        }
      });
    },
    addAddress(data) {
      let that = this;
      this.isLoading = true;
      add_address_info(data, (res, flag) => {
        this.isLoading = false;
        if (flag) {
          this.toast(res.message);
          if (res.code == 200) {
            if (that.editType == "cerate") {
              var creatAddress = new BroadcastChannel("creatAddress");
              creatAddress.postMessage("update");
            } else {
              updateAddress.postMessage("update");
            }
          }
          setTimeout(() => {
            that.back();
          }, 500);
        }
      });
    },
    editAddress(data) {
      let that = this;
      this.isLoading = true;
      edit_address_info(data, (res, flag) => {
        this.isLoading = false;
        if (flag) {
          this.toast(res.message);
          if (res.code == 200) {
            updateAddress.postMessage("update");
          }
          setTimeout(() => {
            that.back();
          }, 500);
        }
      });
    },
    delAddress(id) {
      let that = this;
      del_address_info(
        { id: this.id, users_id: this.users_id },
        (res, flag) => {
          if (flag) {
            this.toast(res.message);
            if (res.code == 200) {
              updateAddress.postMessage("update");
              setTimeout(() => {
                that.back();
              }, 500);
            }
          }
        }
      );
    },
    onCancel(e) {},

    chooseCity() {
      this.showAddress = true;
    },
    confirm(res) {
      this.province = res.province.label;
      this.city = res.city.label;
      this.county = res.county.label;

      this.showAddress = false;
    },
    isDefaultChange(e) {
      // this.isDefault = e.detail.value;
    }
  },

  onUnload() {
    if (this.$refs.mpvueCityPicker.showPicker) {
      this.$refs.mpvueCityPicker.pickerCancel();
    }
  }
};
</script>
<style scoped>
.icon {
  height: 80px;
  color: #fff;
  font-size: 30px;
  justify-content: center;
  align-items: center;
}

.wrapper {
  background-color: #f5f5f5;
  flex: 1;
}

.iconfont {
  font-family: iconfont;
}
.radioBox {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: 60px;
  margin-right: 20px;
}

.radio {
  color: #ba8833;
  font-size: 34px;
  margin-right: 10px;
}
.content {
  padding: 0 30px;
  background-color: #fff;
}

.mt20 {
  margin-top: 20px;
}

.row {
  width: 690px;
  flex-direction: row;
  /* background-color: #fff; */
  align-items: center;
  border-bottom-color: #e6e6e6;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  padding: 10px 0;
}
.tap:active {
  background-color: #f2f2f2;
}
.noBb {
  border-bottom: none;
}

.nominal {
  width: 220px;
  font-size: 30px;
  padding: 20px 0;
}

.addresDemo {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #e6e6e6;
}
.addresItem {
  font-size: 28px;
  padding: 30px 0;
  color: #303030;
}
 
.inputbox {
  flex: 1;
  padding: 20px 10px;
   
  align-items: center;
  flex-direction: row;
  justify-content: flex-end;
  font-size: 30px;
  background-color: #f2f2f2;
  border-radius: 8px;
}

.selectBox {
  flex-direction: row;
  padding: 15px 0;
}
.countNum {
  font-size: 30px;
  margin-right: 10px;
}
.cloboc {
  justify-content: flex-end;
  display: flex;
  flex-direction: row;
  width: 690px;
  padding: 30px;
}
.closeImg {
  width: 40px;
  height: 40px;
}
.maskClack {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.indicator {
  width: 40px;
  height: 40px;
}
.input {
  flex: 1;
  font-size: 30px;
  background-color: #f2f2f2;
  min-height: 32px;
}

.c999 {
  color: #999;
  font-size: 30px;
}

.longtitle {
  flex: 1;
  font-size: 30px;
}
.deletetitle {
  font-size: 24px;
  color: #f06c7a;
  padding: 20px 0;
}

.switch {
  justify-content: flex-end;
  flex-direction: row;
  align-items: center;
  height: 70px;
}
.switchImg {
  width: 112px;
  height: 64px;
}
.detailWrapper {
  flex: 1;
  background-color: #fff;
  display: flex;
  padding: 20px 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.detailInput {
  background-color: #f2f2f2;
  border-radius: 10px;
  height: 80px;
  line-height: 80px;
  padding: 0 10px;
  width: 600px;
}
.textarea {
  margin: 20px 0;
  min-height: 120px;
}

.delloca {
  width: 700px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 36px;
  color: #f06c7a;
  background-color: rgba(255, 0, 0, 0.05);
  /* border-bottom: solid 1px #eee; */
}
.mask {
  position: fixed;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.38);
}
.save {
  position: fixed;
  bottom: 0;
  width: 750px;
  height: 120px;
  justify-content: center;
  align-items: center;
}

.btn {
  width: 690px;
  height: 80px;
  line-height: 80px;
  border-radius: 10px;
  background-color: #303030;
  color: #fff;
  text-align: center;
  font-size: 30px;
}
.btn:active {
  background-color: #222;
}
</style>
